import { observer } from 'mobx-react-lite';
import { useCallback, useEffect, useState } from 'react';
import { class_esy, GoldCoinOutlined, isArray, isEmpty } from 'esy-ui';
import { useGlobalStore, useUserInfoStore } from '@/mobx';
import { postAgentRebateTask, postReceiveAgentTaskAward } from '@/services';
import { Empty, Img } from '@/components';
import { useFormatText } from '@/hooks';

const statusText = Object.freeze({
  0: 'text_169',
  1: 'text_170',
  2: 'text_171',
  3: 'text_172',
  '-1': 'text_173',
});

const testd = [
  {
    ID: 1,
    TaskNumber: 5,
    Award: 10,
    Title: '1212',
    Describe: '1212',
    Icon: '',
    Schedule: 0,
    State: 0,
    ReceiveTime: '1900-01-01 00:00:00',
    FinishTime: '1900-01-01 00:00:00',
    LastUpdateTime: '1900-01-01 00:00:00',
  },
  {
    ID: 2,
    TaskNumber: 15,
    Award: 38,
    Title: '333',
    Describe: '333',
    Icon: '',
    Schedule: 0,
    State: 0,
    ReceiveTime: '1900-01-01 00:00:00',
    FinishTime: '1900-01-01 00:00:00',
    LastUpdateTime: '1900-01-01 00:00:00',
  },
  {
    ID: 3,
    TaskNumber: 30,
    Award: 88,
    Title: '',
    Describe: '',
    Icon: '',
    Schedule: 0,
    State: 0,
    ReceiveTime: '1900-01-01 00:00:00',
    FinishTime: '1900-01-01 00:00:00',
    LastUpdateTime: '1900-01-01 00:00:00',
  },
  {
    ID: 4,
    TaskNumber: 80,
    Award: 298,
    Title: '',
    Describe: '',
    Icon: '',
    Schedule: 0,
    State: 0,
    ReceiveTime: '1900-01-01 00:00:00',
    FinishTime: '1900-01-01 00:00:00',
    LastUpdateTime: '1900-01-01 00:00:00',
  },
  {
    ID: 5,
    TaskNumber: 200,
    Award: 888,
    Title: '',
    Describe: '',
    Icon: '',
    Schedule: 0,
    State: 0,
    ReceiveTime: '1900-01-01 00:00:00',
    FinishTime: '1900-01-01 00:00:00',
    LastUpdateTime: '1900-01-01 00:00:00',
  },
  {
    ID: 6,
    TaskNumber: 500,
    Award: 1888,
    Title: '',
    Describe: '',
    Icon: '',
    Schedule: 0,
    State: 0,
    ReceiveTime: '1900-01-01 00:00:00',
    FinishTime: '1900-01-01 00:00:00',
    LastUpdateTime: '1900-01-01 00:00:00',
  },
  {
    ID: 7,
    TaskNumber: 800,
    Award: 3888,
    Title: '',
    Describe: '',
    Icon: '',
    Schedule: 0,
    State: 0,
    ReceiveTime: '1900-01-01 00:00:00',
    FinishTime: '1900-01-01 00:00:00',
    LastUpdateTime: '1900-01-01 00:00:00',
  },
  {
    ID: 8,
    TaskNumber: 1000,
    Award: 4999,
    Title: '',
    Describe: '',
    Icon: '',
    Schedule: 0,
    State: 0,
    ReceiveTime: '1900-01-01 00:00:00',
    FinishTime: '1900-01-01 00:00:00',
    LastUpdateTime: '1900-01-01 00:00:00',
  },
  {
    ID: 9,
    TaskNumber: 2000,
    Award: 9999,
    Title: '',
    Describe: '',
    Icon: '',
    Schedule: 0,
    State: 0,
    ReceiveTime: '1900-01-01 00:00:00',
    FinishTime: '1900-01-01 00:00:00',
    LastUpdateTime: '1900-01-01 00:00:00',
  },
];

function InviteTask() {
  const { userInfo } = useUserInfoStore();
  const { changeState } = useGlobalStore();
  const [tasks, setTasks] = useState([]);
  const { text } = useFormatText();

  const getTasks = useCallback(() => {
    if (userInfo?.Token) {
      postAgentRebateTask({})
        .then((res: any) => {
          if (res?.Data) {
            setTasks(res?.Data);
          }
        })
        .catch(() => {
          setTasks(testd);
        })
        .finally(() => {
          changeState('isLoading', false);
        });
    }
  }, [changeState, userInfo?.Token]);

  useEffect(() => {
    getTasks();
  }, [getTasks]);

  // 领取
  const handleLq = (info: any) => {
    if (info.State === 2) {
      changeState('isLoading', true);
      postReceiveAgentTaskAward({ TaskID: info.ID })
        .then(() => {
          getTasks();
        })
        .catch(() => {
          changeState('isLoading', false);
        });
    }
  };

  return (
    <div className='w-full h-tab-1 inline-block align-top overflow-y-auto px-3'>
      {isArray(tasks) && !isEmpty(tasks) ? (
        tasks.slice(0, 10).map((it) => (
          <div key={it.ID} className='bg-lg-9 rounded my-2 flex items-center py-2 px-3'>
            <div className='w-16 h-16 rounded flex items-center justify-center'>{it.Icon ? <Img src={it.Icon} /> : null}</div>
            <div className='ml-4 text-xs text-desc flex-1'>
              <div className='font-bold'>{it.Title}</div>
              <div className='flex items-end'>
                <GoldCoinOutlined className='text-sm mr-1 mt-2' /> {it.Award}
              </div>
            </div>
            <div className='text-xs'>
              <div className='flex items-baseline justify-end'>
                <span className='text-base text-color-23'>{it.Schedule}</span>/{it.TaskNumber}
              </div>
              <div className={class_esy(['py-1 px-3 rounded', it.State === 2 && 'bg-color-21 text-white', ![2, 3].includes(it.State) ? 'hidden' : ''])} onClick={() => handleLq(it)}>
                {text(statusText[`${it.State}`])}
              </div>
            </div>
          </div>
        ))
      ) : (
        <Empty />
      )}
    </div>
  );
}

export default observer(InviteTask);
